<template>
  <div class="add-mall-edit-wrapper">
    <el-dialog
      title="图文模块"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      width="1000px"
      top="2vh"
    >
      <el-form ref="form" :model="form" label-width="80px" style="padding-left: 60px">
        <el-form-item label="选择样式：" style="white-space: nowrap">
          <el-select v-model="form.style" placeholder="请选择" :disabled="selectDisabled">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.style"
              @change="handleChange"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="list.length" label="展示样式：" style="white-space: nowrap">
          <!-- 样式一 -->
          <div v-if="form.style === 1" class="style-one">
            <my-upload
              ref="myLoad"
              :min-height="120"
              :img="list[0].image_url"
              :width="750"
              tip="（建议尺寸：宽度750px,高度不限）"
              @remove="handleRemove"
              @success="handleSuccess"
              @click.native="myLoadClick(0)"
            >
              <i class="el-icon-link" @click="linkClick(0)" />
            </my-upload>
          </div>
          <!-- 样式二 -->
          <div v-if="form.style === 2" class="style-two">
            <my-upload
              v-for="(item, index) of list"
              ref="myLoad"
              :key="item.id"
              :img="item.image_url"
              :width="344"
              :min-height="120"
              class="mr"
              tip="宽度344px，高度不限"
              @remove="handleRemove"
              @success="handleSuccess"
              @click.native="myLoadClick(index)"
            >
              <i class="el-icon-link" @click="linkClick(index)" />
            </my-upload>
          </div>
          <!-- 样式三 -->
          <div v-if="form.style === 3" class="style-three">
            <my-upload
              v-for="(item, index) of list"
              ref="myLoad"
              :key="index"
              :img="item.image_url"
              :width="226"
              :min-height="120"
              class="mr"
              tip="宽度226px，高度不限"
              @remove="handleRemove"
              @success="handleSuccess"
              @click.native="myLoadClick(index)"
            >
              <i class="el-icon-link" @click="linkClick(index)" />
            </my-upload>
          </div>
          <!-- 样式四 -->
          <div v-if="form.style === 4" class="style-four">
            <my-upload
              v-for="(item, index) of list"
              ref="myLoad"
              :key="item.id"
              :img="item.image_url"
              :width="344"
              :min-height="120"
              class="mr"
              tip="宽度344px，高度不限"
              @remove="handleRemove"
              @success="handleSuccess"
              @click.native="myLoadClick(index)"
            >
              <i class="el-icon-link" @click="linkClick(index)" />
            </my-upload>
          </div>
          <!-- 样式五 -->
          <div v-if="form.style === 5" class="style-five">
            <div class="left">
              <my-upload
                ref="myLoad"
                class-name="special"
                :img="list[0].image_url"
                :width="226"
                :height="395"
                class="mr"
                tip="宽度226px，高度375px"
                @remove="handleRemove"
                @success="handleSuccess"
                @click.native="myLoadClick(0)"
              >
                <i class="el-icon-link" @click="linkClick(0)" />
              </my-upload>
            </div>
            <div class="right">
              <my-upload
                v-for="index of 4"
                ref="myLoad"
                :key="index"
                :img="list[index].image_url"
                :width="226"
                :height="180"
                class="mr"
                tip="宽度226px，高度180px"
                @remove="handleRemove"
                @success="handleSuccess"
                @click.native="myLoadClick(index)"
              >
                <i class="el-icon-link" @click="linkClick(index)" />
              </my-upload>
            </div>
          </div>
        </el-form-item>
        <el-form-item v-else label="展示样式：" style="white-space: nowrap">
          <!-- 样式一 -->
          <div v-if="form.style === 1" class="style-one">
            <my-upload
              ref="myLoad"
              :min-height="120"
              :width="750"
              tip="（建议尺寸：宽度750px,高度不限）"
              @remove="handleRemove"
              @success="handleSuccess"
              @click.native="myLoadClick(0)"
            >
              <i class="el-icon-link" @click="linkClick(0)" />
            </my-upload>
          </div>
          <!-- 样式二 -->
          <div v-if="form.style === 2" class="style-two">
            <my-upload
              v-for="item of 2"
              ref="myLoad"
              :key="item"
              :width="344"
              :min-height="120"
              class="mr"
              tip="宽度344px，高度不限"
              @remove="handleRemove"
              @success="handleSuccess"
              @click.native="myLoadClick(item - 1)"
            >
              <i class="el-icon-link" @click="linkClick(item-1)" />
            </my-upload>
          </div>
          <!-- 样式三 -->
          <div v-if="form.style === 3" class="style-three">
            <my-upload
              v-for="item of 3"
              ref="myLoad"
              :key="item"
              :width="226"
              :min-height="120"
              class="mr"
              tip="宽度226px，高度不限"
              @remove="handleRemove"
              @success="handleSuccess"
              @click.native="myLoadClick(item - 1)"
            >
              <i class="el-icon-link" @click="linkClick(item - 1)" />
            </my-upload>
          </div>
          <!-- 样式四 -->
          <div v-if="form.style === 4" class="style-four">
            <my-upload
              v-for="item of 4"
              ref="myLoad"
              :key="item"
              :width="344"
              :min-height="120"
              class="mr"
              tip="宽度344px，高度不限"
              @remove="handleRemove"
              @success="handleSuccess"
              @click.native="myLoadClick(item - 1)"
            >
              <i class="el-icon-link" @click="linkClick(item - 1)" />
            </my-upload>
          </div>
          <!-- 样式五 -->
          <div v-if="form.style === 5" class="style-five">
            <div class="left">
              <my-upload
                ref="myLoad"
                class-name="special"
                :width="226"
                :height="395"
                class="mr"
                tip="宽度226px，高度375px"
                @remove="handleRemove"
                @success="handleSuccess"
                @click.native="myLoadClick(0)"
              >
                <i class="el-icon-link" @click="linkClick(0)" />
              </my-upload>
            </div>
            <div class="right">
              <my-upload
                v-for="item of 4"
                ref="myLoad"
                :key="item"
                :width="226"
                :height="180"
                class="mr"
                tip="宽度226px，高度180px"
                @remove="handleRemove"
                @success="handleSuccess"
                @click.native="myLoadClick(item)"
              >
                <i class="el-icon-link" @click="linkClick(item)" />
              </my-upload>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="图片链接："
      :visible.sync="linkVisible"
      width="600px"
      :before-close="linkDialogClose"
    >
      <el-form>
        <el-form-item label="链接地址：">
          <el-input v-model="link" style="200px" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="linkVisible = false">取 消</el-button>
        <el-button type="primary" @click="linkConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import MyUpload from './my-upload'
import { editModule, getModuleDetail, deletePicture } from '@/api/add-mall'
const ERR_OK = 200
export default {
  components: {
    MyUpload
  },
  props: {
    id: {
      type: [Number, String],
      default: ''
    }
  },
  data() {
    return {
      selectDisabled: false,
      flag: -1,
      list: [],
      form: {
        module_id: '',
        style: 1,
        data: []
      },
      link: '',
      options: [
        {
          style: 1,
          label: '样式一'
        },
        {
          style: 2,
          label: '样式二'
        },
        {
          style: 3,
          label: '样式三'
        },
        {
          style: 4,
          label: '样式四'
        },
        {
          style: 5,
          label: '样式五'
        }
      ],
      dialogVisible: false,
      linkVisible: false,
      isEdit: false
    }
  },
  watch: {
    id(newVal) {
      this._getModuleDetail(newVal)
        .then(res => {
          if (!res.data.list.length) {
            this.form.style = 1
            this.form.module_id = ''
            this.form.data = []
            this.list = []
            this.selectDisabled = false
            return
          }
          this.selectDisabled = true
          this.form.style = parseInt(res.data.style)
          // this.form.module_id = res.data.list[0].id
          this.form.module_id = newVal
          this.form.data = []
          res.data.list.forEach((item, index) => {
            if (item.link !== undefined) {
              this.form.data.push({
                image_url: item.image_url,
                link: item.link
              })
            } else {
              this.form.data.push({ image_url: item.image_url })
            }
          })
          this.list = res.data.list
        })
        .catch(err => {
          console.log(err)
        })
    }
  },
  methods: {
    linkClick(index) {
      this.linkVisible = true
      if (this.form.data.length > 0) {
        console.log(this.form.data)
        this.link = this.form.data[index].link
      }
    },
    linkConfirm() {
      this.linkVisible = false
      if (this.form.data[this.flag]) {
        this.form.data[this.flag].link = this.link
      } else {
        this.form.data[this.flag] = { link: this.link }
      }
    },
    myLoadClick(flag) {
      this.flag = parseInt(flag)
    },
    handleSuccess(url) {
      console.log(this.form, this.flag)
      if (this.form.data.length === parseInt(this.form.data.style)) {
        this.form.data[this.flag].image_url = url
      } else {
        this.form.data[this.flag] = { image_url: url }
      }
    },
    handleRemove(url) {
      if (this.list.length) {
        this._deletePicture(this.list[this.flag].id)
          .then(() => {
            this.form.data[this.flag].image_url = ''
            this.form.data[this.flag].link = ''
          })
          .catch(err => {
            console.log(err)
          })
      } else {
        this.form.data[this.flag].image_url = ''
        this.form.data[this.flag].link = ''
      }
    },
    alreadySubmit() {
      this._editModule(this.form)
        .then(() => {
          this.$emit('alreadySubmit')
          this.selectDisabled = true
        })
        .catch(err => {
          console.log(err)
        })
    },
    confirm() {
      this.dialogVisible = false
      this.form.module_id = this.id
      console.log(this.form)
      switch (parseInt(this.form.style)) {
        case 1:
          if (this.form.data.length < 1) {
            this.$message({
              message: '请上传一张图片',
              type: 'warning',
              showClose: true
            })
            this.dialogVisible = true
            return
          }
          this.alreadySubmit()
          break
        case 2:
          if (this.form.data.length < 2) {
            this.$message({
              message: '请上传两张图片',
              type: 'warning',
              showClose: true
            })
            this.dialogVisible = true
            return
          }
          this.alreadySubmit()
          break
        case 3:
          if (this.form.data.length < 3) {
            this.$message({
              message: '请上传三张图片',
              type: 'warning',
              showClose: true
            })
            this.dialogVisible = true
            return
          }
          this.alreadySubmit()
          break
        case 4:
          if (this.form.data.length < 4) {
            this.$message({
              message: '请上传四张图片',
              type: 'warning',
              showClose: true
            })
            this.dialogVisible = true
            return
          }
          this.alreadySubmit()
          break
        case 5:
          if (this.form.data.length < 5) {
            this.$message({
              message: '请上传五张图片',
              type: 'warning',
              showClose: true
            })
            this.dialogVisible = true
            return
          }
          this.alreadySubmit()
          break
      }
      // this.resetForm()
    },
    resetForm() {
      this.form = {
        module_id: '',
        style: 1,
        data: []
      }
    },
    show() {
      this.dialogVisible = true
    },
    hide() {
      this.dialogVisible = false
    },
    handleClose() {
      this.dialogVisible = false
    },
    linkDialogClose() {
      this.linkVisible = false
    },
    handleChange(value) {
      this.form.style = value
    },
    _editModule({ module_id, style, data }) {
      return new Promise((resolve, reject) => {
        editModule({ module_id, style, data })
          .then(res => {
            if (res.code === ERR_OK) {
              console.log(res)
              this._success('上传成功')
              resolve()
            }
          })
          .catch(err => {
            console.log(err)
            reject()
          })
      })
    },
    _getModuleDetail(id) {
      return new Promise((resolve, reject) => {
        getModuleDetail(id)
          .then(res => {
            if (res.code === ERR_OK) {
              console.log(res)
              resolve(res)
            }
          })
          .catch(err => {
            console.log(err)
            reject(err)
          })
      })
    },
    _deletePicture(id) {
      return new Promise((resolve, reject) => {
        deletePicture(id)
          .then(res => {
            if (res.code === ERR_OK) {
              console.log(res)
              this._success('删除成功')
              resolve()
            }
          })
          .catch(err => {
            console.log(err)
            reject(err)
          })
      })
    },
    _success(message) {
      this.$message({
        showClose: true,
        type: 'success',
        message
      })
    }
  }
}
</script>
<style lang="scss" scoped>
// .add-mall-edit-wrapper {
//   /deep/ .el-dialog {
//     min-width: 1000px;
//   }
// }
.style-one,
.style-two,
.style-three {
  display: flex;
  align-items: center;
}
.style-four {
  width: 720px;
  display: flex;
  flex-wrap: wrap;
}
.mr {
  margin-right: 15px;
}
.style-five {
  display: flex;
  align-items: center;
  .right {
    display: flex;
    flex-wrap: wrap;
  }
}
.default {
  background-color: rgba(245, 245, 245, 1);
  border: 1px solid rgba(255, 255, 255, 0);
  width: 200px;
  height: 200px;
  position: relative;
  &.el-icon-picture:before {
    display: inline-block;
    width: 45px;
    height: 45px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 45px;
    color: #ccc;
  }
}
.el-icon-link {
  display: inline-block;
  width: 30px;
  height: 30px;
  background: url("./../../../assets/link.png") no-repeat;
  background-size: cover;
  margin: 0 30px 0 15px;
  opacity: 0;
}
.filter {
  &:hover {
    .el-icon-link {
      opacity: 1;
    }
  }
}
.el-input {
  width: 400px;
}
</style>
